<template>
    <view class="overflow-x-hidden bg-white padding-bottom-30">
        <custom :float="true"></custom>
        <view v-if="data.form.type == 100" class="bg-img text-white flex justify-center flex-direction align-center"
            style="width:750rpx;height:368rpx;background-image: url(../../../static/image/page-project-invest/operate-home-bg.png);">
            <view class="text-xxl text-bold">{{invest_page_title}}</view>
            <view class="text-15 margin-top-20">欢迎股东们参与到各区域{{invest_page_title}}</view>
        </view>
        <view v-else-if="data.form.type == 101" class="bg-img text-white flex justify-center flex-direction align-center"
            style="width:750rpx;height:368rpx;background-image: url(../../../static/image/page-project-invest/entity-shop-bg.png);">
            <view class="text-xxl text-bold">{{invest_page_title}}</view>
            <view class="text-15 margin-top-20">欢迎股东们参与到各区域{{invest_page_title}}</view>
        </view>
        <nBar :title="invest_page_title"></nBar>
        <list class="padding-lr-30" :list="data.list" :empty_list_title="'还没有'+invest_page_title">
            <template #list>
                <view class="cu-list menu">
                    <nMenuItemTopBottom v-for="(info, key) in data.list" :key="key">
                        <template #top>
                            {{info.name}}
                        </template>
                        <template #bottom>
                            <view class="flex flex-direction width-100p">
                                <view class="flex">
                                    <text class="flex-sub">已兑换{{page.invest_share_name}}数：{{info.invest_gold_share_amount | floor}}</text>
                                    <text class="flex-sub">我兑换的{{page.invest_share_name}}数：{{info.user_invest_gold_share_amount | floor}}</text>
                                </view>
                                <view v-if="data.form.type == 100" class="flex margin-top-10">
                                    <nButton :uri="'/project/invest/page?type=100&area_code='+info.area_code+'&type_area_no='+info.type_area_no"
                                        class="basis-sm" title="运营中心"></nButton>
                                    <nButton :uri="'/project/invest/list?type=101&area_code='+info.area_code" class="basis-sm margin-left-30"
                                        title="实体中心"></nButton>
                                </view>
                                <view v-if="data.form.type == 101" class="flex margin-top-10">
                                    <nButton :uri="'/project/invest/page?type=101&area_code='+info.area_code+'&type_area_no='+info.type_area_no"
                                        class="width-100p" title="立即参与"></nButton>
                                </view>
                            </view>
                        </template>
                    </nMenuItemTopBottom>
                </view>
            </template>
        </list>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                page: {
                    invest_page_title: '',
                    invest_share_name: '',
                },
                data: {
                    form: {
                        type: 0,
                        area_code: null
                    },
                    offset: 0,
                    limit: 15,
                    stop: false,
                    list: [],
                },
            }
        },
        onLoad(params) {
            this.data.form.type = params.type || '100';
            this.data.form.area_code = params.area_code || null;
            switch (this.data.form.type) {
                case '100':
                    this.invest_page_title = '运营中心'
                    this.page.invest_share_name = '金股';
                    break;
                case '101':
                    this.invest_page_title = '实体中心'
                    this.page.invest_share_name = '金股';
                    break;
            }
            this.getList(this.$api.list_action_init);
        },
        methods: {
            getList(action) {
                this.$api.list(this, {
                    action,
                    url: '/project/invest/listByTypeArea',
                    data_append: this.data.form,
                    success: (Result) => {
                        if (this.$api.form.toast(this, Result)) return;
                        this.data.list = this.data.list.concat(Result.result.list);
                    }
                });
            }
        },
    }
</script>
